<template>
  <div class="home">
    <!-- 轮播图部分 -->
    <div class="carousel-container">
      <n-carousel
        autoplay
        :interval="5000"
        dot-type="line"
        effect="fade"
        :show-arrow="true"
        :loop="true"
        class="carousel"
      >
        <n-carousel-item v-for="(image, index) in carouselImages" :key="index">
          <img :src="image.url" :alt="image.title" class="carousel-image">
          <div class="carousel-content">
            <h2>{{ image.title }}</h2>
            <p>{{ image.description }}</p>
          </div>
        </n-carousel-item>
      </n-carousel>
    </div>

    <!-- 卡片部分 -->
    <n-card title="欢迎来到 Tech Portal" class="content-card">
      <n-grid :cols="3" :x-gap="12" :y-gap="8" responsive="screen">
        <n-grid-item span="3 m:1">
          <n-card title="最新文章">
            <p>暂无内容</p>
          </n-card>
        </n-grid-item>
        <n-grid-item span="3 m:1">
          <n-card title="热门教程">
            <p>暂无内容</p>
          </n-card>
        </n-grid-item>
        <n-grid-item span="3 m:1">
          <n-card title="技术动态">
            <p>暂无内容</p>
          </n-card>
        </n-grid-item>
      </n-grid>
    </n-card>

    <!-- 添加页脚 -->
    <Footer />
  </div>
</template>

<script setup lang="ts">
// 轮播图数据
const carouselImages = [
  {
    url: 'https://picsum.photos/1920/600?tech=1',
    title: '探索科技前沿',
    description: '发现创新科技，引领未来发展'
  },
  {
    url: 'https://picsum.photos/1920/600?tech=2',
    title: '智能化解决方案',
    description: '用科技改变生活，创造无限可能'
  },
  {
    url: 'https://picsum.photos/1920/600?tech=3',
    title: '数字化转型',
    description: '助力企业升级，实现智能化革新'
  },
  {
    url: 'https://picsum.photos/1920/600?tech=4',
    title: '技术创新',
    description: '突破技术边界，开创发展新篇'
  }
]

// 导入页脚组件
import Footer from '@/components/Footer.vue';
</script>

<style scoped>
.home {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.carousel-container {
  margin-bottom: 24px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.carousel {
  height: 400px;
  width: 100%;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: white;
}

.carousel-content h2 {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 500;
}

.carousel-content p {
  margin: 0;
  font-size: 16px;
  opacity: 0.9;
}

.content-card {
  margin-top: 24px;
}

/* 响应式样式 */
@media (max-width: 768px) {
  .home {
    padding: 12px;
  }

  .carousel {
    height: 200px;
  }

  .carousel-content h2 {
    font-size: 20px;
  }

  .carousel-content p {
    font-size: 14px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .carousel {
    height: 300px;
  }
}

/* 暗色主题适配 */
:deep(.n-carousel.n-carousel--dot-type-line .n-carousel__dots) {
  background-color: rgba(0, 0, 0, 0.2);
  padding: 8px 0;
  bottom: 0;
}

:deep(.n-carousel.n-carousel--dot-type-line .n-carousel__dot) {
  width: 24px;
}
</style> 